<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
const showButton = ref()
const formModel = ref({
  id: '',
  area: '',
  status: '',
  type: '',
  ph: '',
  nutrient: '',
  irrigationfacility: '',
  light: '',
  landresourceid: '',
  order: '',
  name: '',
  userid: '',
  tar: ''
})
const rules = {
  name: [
    { required: true, message: '请输入所属土地资源名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 40 个字符', trigger: 'blur' }
  ],
  order: [
    { required: true, message: '该信息不能为空', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const reg = /^[1-9]\d*$/ // 正整数的正则表达式 开头1-9，后边\d0各或者多个
        if (!reg.test(value)) {
          callback(new Error('请输入有效块数编号'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  area: [
    { required: true, message: '请输入地块面积', trigger: 'blur' },
    {
      pattern: /^(?!0)\d+(\.\d{1,2})?$/, //用于排除输入为零的情况。
      message: '数据格式错误',
      trigger: 'blur'
    }
  ],
  ph: [
    {
      validator: (rule, value, callback) => {
        // 使用正则表达式匹配数字和小数点后一到两位的格式
        const pattern = /^\d+(\.\d{1,2})?$/
        if (value && !pattern.test(value)) {
          callback(new Error('数据格式错误'))
        } else {
          // 将字符串转换为数值类型
          const numValue = parseFloat(value)
          // 判断数值是否在 1 到 14 的范围内
          if (numValue < 0 || numValue > 14) {
            callback(new Error('范围不合理'))
          } else {
            callback()
          }
        }
      },
      trigger: 'blur'
    }
  ],
  type: [
    {
      validator: (rule, value, callback) => {
        if (value && value.length > 10) {
          callback(new Error('最多只能输入 10 个字符'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  nutrient: [
    {
      validator: (rule, value, callback) => {
        if (value && value.length > 100) {
          callback(new Error('最多只能输入 100 个字符'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  irrigationfacility: [
    {
      validator: (rule, value, callback) => {
        if (value && value.length > 100) {
          callback(new Error('最多只能输入 100 个字符'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  light: [
    {
      validator: (rule, value, callback) => {
        if (value && value.length > 100) {
          callback(new Error('最多只能输入 100 个字符'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const form = ref()
const addresscontainer = ref({
  initprovice: '',
  changedprovice: '',
  initcity: '',
  changedcity: '',
  changedcountry: '',
  initcountry: ''
})
const emit = defineEmits(['success'])
import {
  userlandparcelinfoAddService,
  userlandparcelinfoUpService
} from '@/api/user/landparcel'
import { useUserStore } from '@/stores'
const sureQuire = async () => {
  await form.value.validate()
  formModel.value.tar = '1'
  const isEdit = formModel.value.id
  if (isEdit) {
    userlandparcelinfoUpService(formModel.value)
      .then((response) => {
        if (response.data.status === 200) {
          ElMessage.success(response.data.message)
          dialogVisible.value = false
          emit('success')
        } else {
          dialogVisible.value = false
          ElMessage.error(response.data.message)
        }
      })
      .catch((error) => {
        ElMessage.error(error)
      })
  } else {
    formModel.value.userid = `${useUserStore().user.id}`
    userlandparcelinfoAddService(formModel.value)
      .then((response) => {
        if (response.data.status == '200') {
          dialogVisible.value = false
          emit('success')
          ElMessage.success(response.data.message)
        } else {
          dialogVisible.value = false
          ElMessage.error(response.data.message)
        }
      })
      .catch((error) => {
        ElMessage.error(error)
      })
  }
}
const NoQuire = () => {
  form.value.resetFields()
  dialogVisible.value = false
  addresscontainer.value.initprovice = ''
  addresscontainer.value.changedprovice = ''
  addresscontainer.value.initcity = ''
  addresscontainer.value.changedcity = ''
  addresscontainer.value.changedcountry = ''
  addresscontainer.value.initcountry = ''
}
const handleClose = () => {
  form.value.resetFields()
  dialogVisible.value = false
  addresscontainer.value.initprovice = ''
  addresscontainer.value.changedprovice = ''
  addresscontainer.value.initcity = ''
  addresscontainer.value.changedcity = ''
  addresscontainer.value.changedcountry = ''
  addresscontainer.value.initcountry = ''
}

const handleClearValidate = () => {}

//import axios from 'axios'
const open = (row) => {
  dialogVisible.value = true
  formModel.value = { ...row } //添加的话，重置表单内容

  if (formModel.value.id) {
    //
    showButton.value = false
  } else {
    //添加操作的
    showButton.value = true
  }
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="formModel.id ? '修改' : '添加'"
    width="550"
    :before-close="handleClose"
  >
    <el-form
      class="el-form"
      :rules="rules"
      ref="form"
      :model="formModel"
      :before-close="handleClearValidate"
    >
      <el-form-item
        prop="name"
        label="所属土地资源名称"
        required="true"
        v-if="showButton"
      >
        <el-input
          v-model="formModel.name"
          :prefix-icon="User"
          placeholder="请输入名称"
          style="width: 410px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="order" label="所属土地资源块数编号" required="true">
        <el-input
          v-model="formModel.order"
          :prefix-icon="User"
          placeholder="请输入编号"
          style="width: 110px"
          type="number"
          min="1"
        ></el-input>
      </el-form-item>
      <el-form-item prop="area" label="地块面积（亩）" required="true">
        <el-input
          v-model="formModel.area"
          :prefix-icon="User"
          placeholder="请输入面积（亩）"
          style="width: 100px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="type" label="类型">
        <el-input
          v-model="formModel.type"
          :prefix-icon="Iphone"
          placeholder="请输入土地类型"
          style="width: 220px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="ph" label="PH">
        <el-input
          v-model="formModel.ph"
          :prefix-icon="Iphone"
          placeholder="请输入PH值"
          style="width: 100px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="nutrient" label="营养成分说明">
        <el-input
          v-model="formModel.nutrient"
          :prefix-icon="Iphone"
          placeholder="请输入营养成分说明"
          style="width: 410px"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="irrigationfacility"
        label="灌&nbsp;&nbsp;溉&nbsp;&nbsp;设&nbsp;&nbsp;施"
      >
        <el-input
          v-model="formModel.irrigationfacility"
          :prefix-icon="Iphone"
          placeholder="请输入灌溉设施"
          style="width: 410px"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="light"
        label="光&nbsp;&nbsp;照&nbsp;&nbsp;条&nbsp;&nbsp;件"
      >
        <el-input
          v-model="formModel.light"
          :prefix-icon="Iphone"
          placeholder="请输入光照条件"
          style="width: 410px"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="NoQuire">取消</el-button>
        <el-button type="primary" @click="sureQuire"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style>
.el-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
</style>
